<?php /*a:1:{s:97:"D:\phpstudy_pro\WWW\2023php\24zmt\public/themes/admin_simpleboot3/zmt\goods\add_goods_attr_2.html";i:1718595700;}*/ ?>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie-edge">
	<title>Document</title>
	<!--引入样式-->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app" style="padding: 20px 60px;">
	<el-form :inline="true" :model="form">

		<div v-for="(item,index) in form">
			<el-form-item :label=" '商品属性' + (index + 1) ">
				<el-input v-model="item.name" placeholder="请输入商品属性"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="removeFormItem(index)">移除</el-button>
			</el-form-item>
		</div>

	</el-form>
	<div>
		<el-button type="default" @click="addFormItem">增加属性</el-button>
	</div>
	<div style="margin-top: 20px;">
		<el-button type="primary" @click="submitForm">保存</el-button>
	</div>

</div>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!--引入组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	v = new Vue({
		el: "#app",
		data: {
			goods_id: "<?php echo $goods_id; ?>",
			form: [
				{name : ''},
			]
		},
		methods: {
			//添加表单项
			addFormItem() {
				this.form.push({attr: ''})
			},
			//移除表单项
			removeFormItem(index) {
				this.form.splice(index,1)
			},
			//提交表单
			submitForm() {
				$.ajax({
					url: "<?php echo url('Goods/setGoodsAttrPost'); ?>",
					type: "POST",
					data: {
						goods_id: this.goods_id,
						attr: this.form
					},
					success(res) {

					},
					error() {
						alert('请求失败')
					}
				})
			}
		},
		created() {
			$.ajax({
				url: "<?php echo url('Goods/getGoodsAttr'); ?>",
				data: {
					goods_id: this.goods_id
				},
				success(res) {
					v.form = res.data
				},
				error() {
					alert('请求失败')
				}
			})
		}
	})
</script>
</body>
</html>
